<template>
  <span>
    <Avatar :shape="shape" :icon="icon" :size="size" :src="src" @click.native="handleClick" />
    <Modal v-model="showBigImg" width="720" height="360" footer-hide>
      <img :src="currnetBigImg" width="100%" />
    </Modal>
  </span>
</template>

<script>
import { Avatar, Modal } from "view-design";
export default {
  components: {
    Avatar,
    Modal
  },
  model: {
    event: ["onClick"]
  },
  props: {
    shape: {
      type: String,
      required: false,
      default: "square"
    },
    icon: {
      type: String,
      required: false,
      default: "ios-help-circle-outline"
    },
    size: {
      type: String,
      required: false,
      default: "default"
    },
    src: {
      type: String,
      required: false,
      default: ""
    }
  },
  data: function() {
    return {
      currnetBigImg: null,
      showBigImg: false
    };
  },
  methods: {
    handleClick(e) {
      var url = e.target.src;
      if (url && url !== "") {
        this.currnetBigImg = url;
        this.showBigImg = true;
      }
    }
  }
};
</script>

<style>
</style>